<template>
	<div class="add-menu">
		<list-title :data="header"></list-title>
		<el-form :model="menuForm" :rules="rules" ref="menuForm" label-width="200px">
			<el-form-item label="应用名称" prop="menu.app_info_id">
				<el-select v-model="checkAppInfoList" placeholder="应用名称" disabled>
					<el-option v-for="(item, index) in appInfoList" :key="index" :label="item.app_name" :value="parseInt(item.app_info_id)"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="菜单名称" prop="menu.name" style="width: 378px;">
				<el-input v-model="menuForm.menu.name" placeholder="菜单名称"></el-input>
			</el-form-item>
			<el-form-item label="Icon图标" prop="menu.Icon" style="width: 378px;">
				<el-input v-model="menuForm.menu.icon" placeholder="Icon"></el-input>
			</el-form-item>
			<el-form-item label="上级菜单" prop="menu.parentid">
				<el-select v-model="checkParentId" placeholder="请选择上级菜单">
					<el-option label="顶级菜单" value="0"></el-option>
					<el-option v-for="(item, index) in menuList" :key="index" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="VUE匹配API" v-if="!menuForm.menu.outside" prop="menu.apikeyname" style="width: 521px;">
				<el-input v-model="menuForm.menu.apikeyname" placeholder="参数"></el-input>
			</el-form-item>
			<el-form-item label="控制器及方法(API路由)" v-if="!menuForm.menu.outside" style="width: 900px;">
				<el-col :span="5">
					<el-form-item prop="menu.m" style="margin-bottom: 0px">
						<el-input v-model="menuForm.menu.m" placeholder="模块"></el-input>
					</el-form-item>
				</el-col>
				<el-col class="line" :span="1">-</el-col>
				<el-col :span="5">
					<el-form-item prop="menu.c" style="margin-bottom: 0px">
						<el-input v-model="menuForm.menu.c" placeholder="控制器"></el-input>
					</el-form-item>
				</el-col>
				<el-col class="line" :span="1">-</el-col>
				<el-col :span="5">
					<el-form-item prop="menu.a" style="margin-bottom: 0px">
						<el-input v-model="menuForm.menu.a" placeholder="方法"></el-input>
					</el-form-item>
				</el-col>
			</el-form-item>
			<el-form-item label="参数(API路由)" v-if="!menuForm.menu.outside" prop="menu.args" style="width: 521px;">
				<el-input v-model="menuForm.menu.args" placeholder="参数"></el-input>
			</el-form-item>
			<el-form-item label="是否子路由" prop="menu.child_route">
				<el-switch v-model="menuForm.menu.child_route"></el-switch>
			</el-form-item>
			<el-form-item label="VUE路由" v-if="!menuForm.menu.outside" style="width: 1200px;">
				<el-col :span="7">
					<el-form-item prop="vueRouter.path" style="margin-bottom: 0px">
						<el-input v-model="menuForm.vueRouter.path" placeholder="Path" :disabled="true"></el-input>
					</el-form-item>
				</el-col>
				<el-col class="line" :span="1">-</el-col>
				<el-col :span="7">
					<el-form-item prop="vueRouter.name" style="margin-bottom: 0px">
						<el-input v-model="menuForm.vueRouter.name" placeholder="Name" :disabled="true"></el-input>
					</el-form-item>
				</el-col>
				<el-col class="line" :span="1">-</el-col>
				<el-col :span="8">
					<el-form-item prop="vueRouter.component" style="margin-bottom: 0px">
						<el-input v-model="menuForm.vueRouter.component" placeholder="Component" @input="inputComponent"></el-input>
					</el-form-item>
				</el-col>
			</el-form-item>
			<el-form-item label="标签" prop="menu.flag">
				<el-select v-model="menuForm.menu.flag" placeholder="请选择标签">
					<el-option label="无标签" :value="0"></el-option>
					<el-option label="hot" :value="1"></el-option>
					<el-option label="new" :value="2"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="后台链接地址" v-if="!menuForm.menu.outside" prop="menu.link" style="width: 825px;">
				<el-input v-model="menuForm.menu.link" placeholder="后台链接地址"></el-input>
			</el-form-item>
			<el-form-item label="显示位置" prop="menu.showflag">
				<el-radio-group v-model="menuForm.menu.showflag">
					<el-radio :label="1">全部显示</el-radio>
					<el-radio :label="2">左侧导航</el-radio>
					<el-radio :label="3">头部导航</el-radio>
					<el-radio :label="4">内页</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="是否显示" prop="menu.display">
				<el-switch v-model="menuForm.menu.display"></el-switch>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm('menuForm')" :disabled='menuForm.submitLock'>
					确 定 <span class="el-icon-loading" v-if='menuForm.submitLock'></span>
				</el-button>
				<el-button @click="resetForm('menuForm')" v-if='menuForm.menu.id==0'>重 置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import ListTitle from "pc/common/Title"
import {changeToBool} from "static/js/common.js"
import {changeBoolToNum} from "static/js/common.js"
import {domain} from '@/api';

export default {
	data() {
		return {
			/*头部数据*/
			header: {
				title: '添加菜单' + ((this.$route.query.app_name)?('[' + this.$route.query.app_name + ']'):'[认证中心]'),
				reload: false,
				buttons: [
					{
						title: '菜单列表',
						type: 'primary',
						pathName: 'pc/devper/menu/MenuList',
						query: {
							app_info_id: this.$route.query.app_info_id,//如果是列表传过来的，会传app_info_id，需要带给添加页面
							app_name: this.$route.query.app_name//如果是列表传过来的，会传app_name，需要带给添加页面
						},
					}
				]
			},
			menuList: [],//所属菜单
			/*列表数据*/
			appInfoList: [],//所属应用数据
			menuForm: {
				submitLock: false,
				menu: {
					id: 0,
					app_info_id: '',
					name: '',
					icon: '',
					parentid: '',
					apikeyname: '',
					m: '',
					c: '',
					a: '',
					args: '',
					flag: 0,
					child_route: 1,
					link: '',
					showflag: 2,
					display: false,
				},
				vueRouter: {
					path: '',
					name: '',
					component: '',
				}
			},
			rules: {
				menu: {
					name: [
						{ required: true, message: '请输入菜单名称', trigger: 'blur' },
						{ min: 2, max: 16, message: '长度在 2 到 16 个字符', trigger: 'blur' }
					],
					parentid: [
						{ required: true, message: '请选择上级菜单', trigger: 'change' }
					],
					c: [
						{ min: 2, max: 32, message: '长度在 2 到 32 个字符', trigger: 'blur' }
					],
					a: [
						{ min: 2, max: 32, message: '长度在 2 到 32 个字符', trigger: 'blur' }
					]
				},
				// vueRouter: {
				// 	path: [
				// 		{ min: 3, max: 64, message: '长度在 3 到 64 个字符', trigger: 'blur' }
				// 	],
				// 	name: [
				// 		{ min: 3, max: 64, message: '长度在 3 到 64 个字符', trigger: 'blur' }
				// 	],
				// 	component: [
				// 		{ min: 3, max: 64, message: '长度在 3 到 64 个字符', trigger: 'blur' }
				// 	],
				// }
			}
		};
	},
	components: {
		ListTitle,
	},
	created: function() {
		/*获取所有菜单数据*/
		this.getAppInfoList()
		this.getMenuList()
		/*如果是修改，取出旧数据*/
		if(this.$route.query.id){
			this.getMenu(this.$route.query.id)
		}
	},
	methods: {
		/*获取菜单*/
		getMenuList: function(){
			this.menuList = []
			this.$baseURL(domain.ac)
			if(this.$api.menuList != undefined){
				this.$get(this.$api.menuList, {
					'app_info_id': (this.$route.query.app_info_id)?this.$route.query.app_info_id:0,
					// 'showflag': 0,
					'display': 0
				}).then(res => {
					// console.log(res);
					// if(res.data.code == 10007){//后台提示需要登录
					// 	this.$cookie.remove('isLogin');//刪除cookie登录信息
					// 	this.reload();
					// }
					if(res.data.code === 0){
						if(res.data.data != undefined){
							Object.keys(res.data.data).forEach((k) => {
								let indent = '';
								for(var i=1; i<res.data.data[k].level; i++){
									if(i == 1){
										indent += '|---';
									}else{
										indent += '---';
									}
								}
								this.menuList.push ({
									id: res.data.data[k].id,
									name: indent + res.data.data[k].name
								});
							})
						}
						this.tableLoading = false
					}
				})
				.catch(err => {})
				.finally(() => {}) 
			}
		},
		/*获取应用数据*/
		getAppInfoList: function(){
			this.$baseURL(domain.ac)
			if(this.$api.appInfoList != undefined){
				this.$get(this.$api.appInfoList, {
					'display': 2
				}).then(res => {
					// console.log(res);
					// if(res.data.code == 10007){//后台提示需要登录
					// 	this.$cookie.remove('isLogin');//刪除cookie登录信息
					// 	this.reload();
					// }
					if(res.data.code === 0){
						if(res.data.data != undefined){
							this.appInfoList = [
								{
									app_info_id: 0,
									app_name: '认证中心',
								}
							]
							Object.keys(res.data.data).forEach((k) => {
								this.appInfoList.push ({
									app_info_id: res.data.data[k].app_info_id,
									app_name: res.data.data[k].app_name,
									app_cat_id: res.data.data[k].app_cat_id,
									icon: res.data.data[k].icon,
									app_url: res.data.data[k].app_url,
									outside: res.data.data[k].outside,
									display: changeToBool(res.data.data[k].display)
								});
							})
						}
					}
				})
				.catch(err => {})
				.finally(() => {}) 
			}
		},
		/*取出需要修改的数据*/
		getMenu: function(){
			this.header.title = '编辑菜单'
			/*取出需要修改的数据*/
			this.menuForm.submitLock = true;
			this.$baseURL(domain.ac)
			if(this.$api.modifyMenu != undefined){
				this.$get(this.$api.modifyMenu, {
					'id': this.$route.query.id
				}).then(res => {
					// if(res.data.code == 10007){//后台提示需要登录
					// 	this.$cookie.remove('isLogin');//刪除cookie登录信息
					// 	this.reload();
					// }
					if(res.data.code == 0){
						// console.log(res.data.data)
						this.menuForm.menu.id = res.data.data.id
						this.menuForm.menu.app_info_id = parseInt(res.data.data.app_info_id)
						this.menuForm.menu.name = res.data.data.name
						this.menuForm.menu.icon = res.data.data.icon
						this.menuForm.menu.parentid = res.data.data.parentid
						this.menuForm.menu.apikeyname = res.data.data.apikeyname
						this.menuForm.menu.m = res.data.data.m
						this.menuForm.menu.c = res.data.data.c
						this.menuForm.menu.a = res.data.data.a
						this.menuForm.menu.args = res.data.data.args
						this.menuForm.menu.flag = parseInt(res.data.data.flag)
						this.menuForm.menu.child_route = changeToBool(res.data.data.child_route)
						this.menuForm.menu.link = res.data.data.link
						this.menuForm.menu.showflag = parseInt(res.data.data.showflag)
						this.menuForm.menu.display = changeToBool(res.data.data.display)
						this.menuForm.vueRouter.path = (res.data.data.vueRouter != null)?res.data.data.vueRouter.path:''
						this.menuForm.vueRouter.name = (res.data.data.vueRouter != null)?res.data.data.vueRouter.name:''
						this.menuForm.vueRouter.component = (res.data.data.vueRouter != null)?res.data.data.vueRouter.component:''
					}else{
						this.$message({
							showClose: true,
							message: res.data.info,
							type: 'error'
						});
					}
					this.menuForm.submitLock = false;
				})
				.catch(err => {})
				.finally(() => {}) 
			}
		},
		/*提交添加、修改表单*/
		submitForm(formName) {
			if(!this.menuForm.submitLock){
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.menuForm.submitLock = true;
						/*添加、修改分类*/
						this.$baseURL(domain.ac)
						let apiUrl = this.$api.addMenu//默认是添加
						if(this.menuForm.menu.id > 0){//修改
							apiUrl = this.$api.modifyMenu
						}
						if(apiUrl != undefined){
							/*添加菜单*/
							this.$post(apiUrl, {
								Menu: this.menuForm.menu,
								VueRouter: this.menuForm.vueRouter
							}).then(res => {
								// console.log(res);
								/*成功*/
								if(res.data.code == 0){
									this.$message({
										showClose: true,
										message: res.data.info,
										type: 'success'
									});
									if(this.menuForm.menu.id > 0){
										this.$router.go(-1)	
									}else{
										this.$refs[formName].resetFields();
										this.menuForm.menu.icon = '';
										this.getMenuList();
									}
								}else{
									this.$message({
										showClose: true,
										message: res.data.info,
										type: 'error'
									});
								}
								this.menuForm.submitLock = false;
							});
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		},
		/*重置表单*/
		resetForm(formName) {
			this.$refs[formName].resetFields();
		},
		inputComponent(){
			if(this.menuForm.vueRouter.component){
				this.menuForm.vueRouter.path = '/' + this.menuForm.vueRouter.component
			}else{
				this.menuForm.vueRouter.path = ''
			}
			this.menuForm.vueRouter.name = this.menuForm.vueRouter.component
		}
	},
	computed: {
		/*验证菜单列表是否已经获取到，有了数据才展示,防止直接出现数字，比较尴尬*/
		checkParentId: {
			get: function () {
				if(this.menuList.length >= 0){
					return this.menuForm.menu.parentid
				}else{
					return ''
				}
			},
			set: function (val) {
				this.menuForm.menu.parentid = val
			}
		},
		/*验证应用列表数据是否获取到，有了数据才展示,防止直接出现数字，比较尴尬*/
		checkAppInfoList: {
			get: function () {
				if(this.appInfoList.length > 0){
					if(this.$route.query.app_info_id){
						this.menuForm.menu.app_info_id = parseInt(this.$route.query.app_info_id)
					}else{
						this.menuForm.menu.app_info_id = 0
					}
					return this.menuForm.menu.app_info_id
				}else{
					return ''
				}
			}
		}
    }
};
</script>

<style lang="stylus" scoped>
.add-menu
	form
		margin-top: 10px
		.line
			text-align: center
</style>